<template>
	<view class="album">
		<scroll-view class="left" scroll-y="true">
			<view @click="choose(index)"
			:class="selectedIndex===index?'active':'none'" 
			v-for="(item,index) in scrollItems" 
			:key="index">{{item.title}}
			</view>
		</scroll-view>
		<scroll-view class="right" scroll-y="true">
			<view class="item" v-for="(item,index) in goodsItem" :key="index">
				<image :src="item.goodsImgUrl" @click="previewImg(item.goodsImgUrl)"></image>
				<text>{{item.goodsName}}</text>
			</view>
			<text v-if="goodsItem.length === 0">暂无商品展示</text>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedIndex: 0,
				scrollItems: [],
				goodsItem: []
			}
		},
		onLoad() {
			this.loadCategory();
		},
		methods: {
			loadCategory() {
				// 真实场景应该是调用接口获取所有种类信息
				console.log("获取所有分类信息！")
				this.scrollItems = [
					{
						id: 0,
						title: "米面"
					},
					{
						id: 1,
						title: "粮油"
					},
					{
						id: 2,
						title: "蔬菜"
					},
					{
						id: 3,
						title: "水果"
					},
					{
						id: 4,
						title: "酒品"
					},
					{
						id: 5,
						title: "饮料"
					},
					{
						id: 6,
						title: "零食"
					},
					{
						id: 7,
						title: "肉蛋"
					},
					{
						id: 8,
						title: "禽鱼"
					},
					{
						id: 9,
						title: "奶品"
					},
					{
						id: 10,
						title: "速食"
					},
					{
						id: 11,
						title: "其它"
					}
				];
			},
			choose(currentIndex){
				this.selectedIndex = currentIndex;
				// 真实场景应该是根据选择菜单的id调用接口获取不同的数据进行展示
				this.goodsItem = [
					{
						goodsImgUrl: "../../static/img/1.jpg",
						goodsName: "11111111111111"
					},
					{
						goodsImgUrl: "../../static/img/2.jpg",
						goodsName: "22222222222222"
					},
					{
						goodsImgUrl: "../../static/img/3.jpg",
						goodsName: "33333333333333"
					}
				];
			},
			previewImg(goodsImgUrl) {
				const urls = this.goodsItem.map(item => {
					return item.goodsImgUrl;
				});
				uni.previewImage({
					current: goodsImgUrl,
					urls: urls
				})
			}
		}
	}
</script>

<style lang="scss">
page {
	height: 100%;
}
.album {
	height: 100%;
	display: flex;
	.left {
		width: 200rpx;
		height: 100%;
		border-right: 2px solid #eee;
		view {
			height: 60px;
			line-height: 60px;
			color: #333;
			text-align: center;
			font-size: 30rpx;
			border-bottom: 1px solid #eee;
		}
		.active {
			background: #b50e03;
			color: #fff;
		}
	}
	.right {
		height: 100%;
		width: 520rpx;
		margin: 10rpx auto;
		.item {
			border-bottom: 1px solid #eee;
			image {
				width: 520rpx;
				height: 520rpx;
				border-radius: 5px;
			}
			text {
				font-size: 30rpx;
				line-height: 60rpx;
			}
		}
	}
}
</style>
